"use client"

import { useState } from "react"

interface MultiDataViewerProps {
  data: {
    type: "template" | "extract" | "report"
    content: any
  }
}

export default function MultiDataViewer({ data }: MultiDataViewerProps) {
  const [activeView, setActiveView] = useState<"preview" | "edit">("preview")
  const [editableContent, setEditableContent] = useState<string>("")

  // 根据数据类型渲染不同的内容
  const renderContent = () => {
    switch (data.type) {
      case "template":
        return renderTemplateData()
      case "extract":
        return renderExtractData()
      case "report":
        return renderReportData()
      default:
        return <div>无数据</div>
    }
  }

  // 渲染模板数据
  const renderTemplateData = () => {
    if (activeView === "preview") {
      return (
        <div className="prose max-w-none">
          <h1>财务报告模板</h1>
          <p>
            <strong>公司名称：</strong> {"{{公司名称}}"}
          </p>
          <p>
            <strong>报告日期：</strong> {"{{报告日期}}"}
          </p>
          <h2>财务摘要</h2>
          <p>本月公司总收入为 {"{{总收入}}"} 元，总支出为 {"{{总支出}}"} 元，净利润为 {"{{净利润}}"} 元。</p>
          <h2>详细财务数据</h2>
          <table className="border-collapse border w-full">
            <thead>
              <tr>
                <th className="border p-2">项目</th>
                <th className="border p-2">本月</th>
                <th className="border p-2">上月</th>
                <th className="border p-2">同比增长</th>
              </tr>
            </thead>\
